
import {Row,Col,Form,Input,Select,Button ,message } from "antd"
import {useRef} from "react"
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  LockOutlined,
  UserOutlined,
  PhoneOutlined 
} from '@ant-design/icons';
import {observer,inject} from "mobx-react"
import info from "@/mobx/info"
import { roleList } from '@/utils';
import { reg } from '@/utils/validate';
import { ajax } from '@/services';
import { history } from 'umi';
const {Option} = Select;
const tailLayout1 = {
  wrapperCol:{
      span:20,
      offset:0
  }
}

export default observer(function AddUser({history}){
  const form:any = useRef()
  const {userInfo} = info; 
  const resetFields = ()=>{
    form.current.resetFields();
  }
  const onFinish = async (value)=>{
    let {code,result} = await ajax.adduser(value);
    if(code==200){
      history.push("/main/user/list")
    }
  }
  const onFinishFailed = ()=>{
    message.error("请输入有效的注册信息 ")
  }
  return (
    <div>
        <h2> 添加用户</h2>
        <Row>
          <Col xxl={4} xl={6} lg={8} md={8} sm={12} xs={20} >
          <Form
            name="basic"
            initialValues={{
              password:"qwe123"
             }}
            autoComplete="off"
            className="login-form"
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            ref={form}
            layout={'vertical'}
          >
               <Form.Item
                  {...tailLayout1}
                  name="phone"
                  label="手机号码"
                  rules={[
                    { required: true, message: '请输入手机号码' },
                    { pattern:reg.phone,message:'请输入正确的手机号码'}
                  ]}
                >
                  <Input  prefix={<PhoneOutlined className="site-form-item-icon" />} placeholder="请输入你的手机号码" />
              </Form.Item>
              <Form.Item
                {...tailLayout1}
                  name="username"
                  label="用户名称"
                  rules={[{ required: true, message: '请输入用户名' }]}
                >
                  <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入你的用户名" />
              </Form.Item>
              <Form.Item
                {...tailLayout1}
                  name="password"
                  label="用户密码"
                  rules={[{ required: true, message: '请输入密码' }]}
                >
                  <Input  disabled  prefix={<LockOutlined className="site-form-item-icon" />} placeholder="请输入密码" />
              </Form.Item>
              <Form.Item
                {...tailLayout1}
                  name="role"
                  label="用户身份"
                  rules={[{ required: true, message: '请选择' }]}
                >
                  
                  {userInfo?<Select
                    
                  >
                      {
                        roleList.map((l,i)=>{
                          return (
                            (userInfo.role > l.value) ?<Select.Option key={i} value={l.value}>
                              {l.text}
                            </Select.Option>
                            :null 
                          )
                        })
                      }
                  </Select>:null}
              </Form.Item>
            <Form.Item  {...tailLayout1}>
              <Button type="primary"  htmlType="submit" className="login-form-button">
                添加用户
              </Button>
              <Button  onClick={resetFields}  htmlType="button" style={{margin:"0 10px "}} type="primary" danger className="login-form-button">
                重置数据
              </Button>
            </Form.Item>
          </Form>
          </Col>
        </Row>
    </div>
  )
})